﻿<Page
    x:Class="AppMetro.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppMetro"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
        <DataTemplate x:Key="CircleCursor">
            <Ellipse Fill="Red" Width="20" Height="20">
                <!--Apply offset to center on the center of the ellipse-->
                <Ellipse.RenderTransform>
                    <TranslateTransform X="-10" Y="-10" />
                </Ellipse.RenderTransform>
            </Ellipse>
        </DataTemplate>
        <DataTemplate x:Key="ArrowAndTextCursor">
            <Grid>
                <Path Width="20" Height="20"
							  Data="M20,20 L 0,0 0,10 M 0,0 L 10,0" 
							  Stroke="Black"
							  StrokeThickness="2"
							  HorizontalAlignment="Left"
							  VerticalAlignment="Top"
							  />
                <TextBlock Text="This is a custom cursor"
								   Margin="20,20,0,0" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="AnimatedCursor">
            <Grid>
                <Grid.Triggers>
                    <EventTrigger RoutedEvent="Grid.Loaded">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation RepeatBehavior="Forever"
										 From="0" To="360" 
										 Storyboard.TargetName="rot" 
										 Storyboard.TargetProperty="Angle"
										 Duration="0:0:2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Grid.Triggers>
                <Path Width="20" Height="20"
					Data="M20,20 L 8,8 4,15 0,0 15,4 8,8" 
					Stroke="Black"
					StrokeThickness="2"
					RenderTransformOrigin="0,0">
                    <Path.RenderTransform>
                        <RotateTransform x:Name="rot" />
                    </Path.RenderTransform>
                </Path>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="Cross">
            <Path Width="10" Height="10"
				Data="M0,0 L 1,1 M 1,0 L 0,1" 
				Stroke="Black"
				StrokeThickness="2"
				Stretch="Fill">
                <!--Apply offset to center on the center of the cross-->
                <Path.RenderTransform>
                    <TranslateTransform X="-5" Y="-5" />
                </Path.RenderTransform>
            </Path>
        </DataTemplate>
        <DataTemplate x:Key="Target">
            <Path Width="20" Height="20"
				Data="M0,5 L 3,5 M 7,5 L 10,5 M 5,0 L 5,3 M 5,7 L 5,10 M 4.8,5 L 5.2,5" 
				Stroke="Black"
				StrokeThickness="1"
				Stretch="Fill">
                <!--Apply offset to center on the center of the cross-->
                <Path.RenderTransform>
                    <TranslateTransform X="-10" Y="-10" />
                </Path.RenderTransform>
            </Path>
        </DataTemplate>
    </Page.Resources>

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Border Margin="5" Background="Blue" Grid.Row="0" Grid.Column="0"
				local:CustomCursor.CursorTemplate="{StaticResource ArrowAndTextCursor}" local:CustomCursor.DragCursorTemplate="{StaticResource CircleCursor}"  >
            <TextBlock Text="arrow style cursor with drag and holding circle style" />
        </Border>
        <Border Margin="5" Background="Green" Grid.Row="0" Grid.Column="1" 
				local:CustomCursor.CursorTemplate="{StaticResource ArrowAndTextCursor}"  >
            <TextBlock Text="Arrow + Text cursor" />
        </Border>

        <Border Margin="5" Background="Orange" Grid.Row="0" Grid.Column="2" x:Name="dynamic" >
            <Grid>
                <ComboBox SelectionChanged="ComboBox_SelectionChanged" VerticalAlignment="Top">
                    <ComboBoxItem Content="Default" IsSelected="True" />
                    <ComboBoxItem Content="circleCursor" Tag="CircleCursor" />
                    <ComboBoxItem Content="ArrowAndTextCursor" Tag="ArrowAndTextCursor" />
                    <ComboBoxItem Content="AnimatedCursor" Tag="AnimatedCursor" />
                    <ComboBoxItem Content="Cross" Tag="Cross" />
                    <ComboBoxItem Content="Target" Tag="Target" />
                </ComboBox>
                <TextBlock Text="Pick a cursor in dropdown" />
            </Grid>
        </Border>

        <Border Margin="5" Background="Gray" Grid.Row="1" Grid.Column="0"
				local:CustomCursor.CursorTemplate="{StaticResource AnimatedCursor}" >
            <TextBlock Text="Animated cursor" />
        </Border>

        <Border Margin="5" Background="Red" Grid.Row="1" Grid.Column="1" 
				local:CustomCursor.CursorTemplate="{StaticResource Cross}" >
            <TextBlock Text="Cross cursor" />
        </Border>

        <Border Margin="5" Background="Yellow" Grid.Row="1" Grid.Column="2" 
				local:CustomCursor.CursorTemplate="{StaticResource Target}" 
				 >
            <TextBlock Text="Target cursor" />
        </Border>

    </Grid>
</Page>
